﻿@{
    ViewBag.Title = "添加车辆";
}
<div id="page-AddCar">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left back" data-transition='slide-out'>
            <span class="icon icon-left"></span>返回
        </a>
        <h1 class='title'>添加车辆</h1>
        <style type="text/css">
            .align-center {
                margin: 0 auto; /* 居中 这个是必须的，，其它的属性非必须 */
                text-align: center; /* 文字等内容居中 */
            }

            .cp {
                width: 10%;
                height: 2rem;
                margin-left: 1%;
                text-align: center;
            }

            .cp2 {
                width: 10%;
                height: 2rem;
                margin-left: 0.5%;
                text-align: center;
            }
        </style>
    </header>
    <div class="content">
        <h3 style="color: #858585">&nbsp;请选择车牌颜色</h3>
        <div class="row">
            <div class="col-25"><a href="#" class="button button-big button-fill" onclick="Updata(1)">蓝牌</a></div>
            <div class="col-25"><a href="#" class="button button-big button-fill button-success" style="background-color: #F0E68C;" onclick="Updata(2)">黄牌</a></div>
            <div class="col-25"><a href="#" class="button button-big button-fill button-success" style="background-color: black;" onclick="Updata(3)">黑牌</a></div>
            <div class="col-25"><a href="#" class="button button-big button-fill button-success" onclick="Updata(4)">新能源</a></div>
        </div>
        <hr align="center" width="80%" color="#DBDBDB" size="3">
        <h3 style="color: #858585">&nbsp;请输入车牌号码(忽略大小写)</h3>
        <div class="align-center" id="plain">
            <input type="text" id="cp1" class="cp" maxlength="1" />
            <input type="text" id="cp2" class="cp" maxlength="1" />
            <canvas id="canvas" width="20px" height="20px"></canvas>
            <input type="text" id="cp3" class="cp" maxlength="1" />
            <input type="text" id="cp4" class="cp" maxlength="1" />
            <input type="text" id="cp5" class="cp" maxlength="1" />
            <input type="text" id="cp6" class="cp" maxlength="1" />
            <input type="text" id="cp7" class="cp" maxlength="1" />
        </div>
        @*  新能源*@
        <div class="align-center" id="Xin" hidden="true">
            <input type="text" id="cp8" class="cp2" maxlength="1" />
            <input type="text" id="cp9" class="cp2" maxlength="1" />
            <canvas id="mycanvas" width="20px" height="20px"></canvas>
            <input type="text" id="cp10" class="cp2" maxlength="1" />
            <input type="text" id="cp11" class="cp2" maxlength="1" />
            <input type="text" id="cp12" class="cp2" maxlength="1" />
            <input type="text" id="cp13" class="cp2" maxlength="1" />
            <input type="text" id="cp14" class="cp2" maxlength="1" />
            <input type="text" id="cp15" class="cp2" maxlength="1" />
        </div>

        <div class="row" style="margin: 1.5rem 1rem 1rem 0.4rem;">
            <div class="col-100"><a href="#" class="button button-big button-fill" id="ChePai" style="height: 3rem; font-size: 50px; padding: 0.3rem">闽D99999</a></div>
        </div>

        <div class="row" style="margin: 2rem 0.8rem 0.8rem 0.2rem;">
            <div class="col-100"><a href="#" class="button button-big button-fill button-success" style="font-size: 24px;" onclick="Submit()">确认提交</a></div>
        </div>
    </div>
</div>
<script>
    var isXin = false;
    function Updata(val) {
        if (val == 1) {
            $("#ChePai").css("background-color", "#0894ec");
            $("#plain").show();
            $("#Xin").hide();
            isXin = false;

        } else if (val == 2) {
            $("#ChePai").css("background-color", "#F0E68C");
            $("#plain").show();
            $("#Xin").hide();
            isXin = false;
        } else if (val == 3) {
            $("#ChePai").css("background-color", "black");
            $("#plain").show();
            $("#Xin").hide();
            isXin = false;
        } else if (val == 4) {
            $("#ChePai").css("background-color", "#4cd964");
            $("#plain").hide();
            $("#Xin").show();
            isXin = true;
        }
        if (isXin) {
            $("#ChePai").text("闽D999999");
        } else {
            $("#ChePai").text("闽D99999");
        }
        QCData();

    }
    $("input").focus(function () {
        $("#ChePai").text("输入中...");
    });
    $("input").blur(function () {
        if (isXin) {
            var cp8 = $(" #cp8").val().length > 0 ? $(" #cp8").val() : "闽";
            var cp9 = $(" #cp9").val().length > 0 ? $(" #cp9").val() : "D";
            var cp10 = $(" #cp10").val().length > 0 ? $(" #cp10").val() : 9;
            var cp11 = $(" #cp11").val().length > 0 ? $(" #cp11").val() : 9;
            var cp12 = $(" #cp12").val().length > 0 ? $(" #cp12").val() : 9;
            var cp13 = $(" #cp13").val().length > 0 ? $(" #cp13").val() : 9;
            var cp14 = $(" #cp14").val().length > 0 ? $(" #cp14").val() : 9;
            var cp15 = $(" #cp15").val().length > 0 ? $(" #cp15").val() : 9;
            $("#ChePai").text(cp8 + cp9 + cp10 + cp11 + cp12 + cp13 + cp14 + cp15);
        } else {
            var cp1 = $(" #cp1").val().length > 0 ? $(" #cp1").val() : "闽";
            var cp2 = $(" #cp2").val().length > 0 ? $(" #cp2").val() : "D";
            var cp3 = $(" #cp3").val().length > 0 ? $(" #cp3").val() : 9;
            var cp4 = $(" #cp4").val().length > 0 ? $(" #cp4").val() : 9;
            var cp5 = $(" #cp5").val().length > 0 ? $(" #cp5").val() : 9;
            var cp6 = $(" #cp6").val().length > 0 ? $(" #cp6").val() : 9;
            var cp7 = $(" #cp7").val().length > 0 ? $(" #cp7").val() : 9;
            $("#ChePai").text(cp1 + cp2 + cp3 + cp4 + cp5 + cp6 + cp7);
        }
    });
    function GetData() {
        if (isXin) {
            var cp8 = $(" #cp8").val();
            var cp9 = $(" #cp9").val();
            var cp10 = $(" #cp10").val();
            var cp11 = $(" #cp11").val();
            var cp12 = $(" #cp12").val();
            var cp13 = $(" #cp13").val();
            var cp14 = $(" #cp14").val();
            var cp15 = $(" #cp15").val();
            if (cp8.length > 0 && cp9.length > 0 && cp10.length > 0 && cp11.length > 0 && cp12.length > 0 && cp13.length > 0 && cp14.length > 0 && cp15.length > 0) {
                return cp8 + cp9 + cp10 + cp11 + cp12 + cp13 + cp14 + cp15;
            } else {
                $.toast('车牌异常');
            }
        } else {
            var cp1 = $(" #cp1").val();
            var cp2 = $(" #cp2").val();
            var cp3 = $(" #cp3").val();
            var cp4 = $(" #cp4").val();
            var cp5 = $(" #cp5").val();
            var cp6 = $(" #cp6").val();
            var cp7 = $(" #cp7").val();
            if (cp1.length > 0 && cp2.length > 0 && cp3.length > 0 && cp4.length > 0 && cp5.length > 0 && cp6.length > 0 && cp7.length > 0) {
                return cp1 + cp2 + cp3 + cp4 + cp5 + cp6 + cp7;
            } else {
                $.toast('车牌异常');
            }
        }
    }
    function QCData() {
        $(" #cp1").val('');
        $(" #cp2").val('');
        $(" #cp3").val('');
        $(" #cp4").val('');
        $(" #cp5").val('');
        $(" #cp6").val('');
        $(" #cp7").val('');
        $(" #cp8").val('');
        $(" #cp9").val('');
        $(" #cp10").val('');
        $(" #cp11").val('');
        $(" #cp12").val('');
        $(" #cp13").val('');
        $(" #cp14").val('');
        $(" #cp15").val('');
    }
    function Submit() {
        var ChePai = GetData();
        ChePai = ChePai.toUpperCase();
        if (ChePai) {
            common.postAjax('/H5/AddCar', { ChePai: ChePai }, function (result) {
                $.hidePreloader();
                if (result.Code == 1) {
                    $.toast('提交成功');
                    QCData();
                } else {
                    $.alert(result.Message);
                }

            });
        }
    }
    var common = {
        postAjax: function (url, data, success) {
            var hs = document.getElementsByName('__RequestVerificationToken');
            if (hs.length > 0) {
                data = data || {};
                data["__RequestVerificationToken"] = hs[0].value;
            }
            $.ajax({
                url: url,
                cache: false,
                type: 'post',
                dataType: 'json',
                data: data,
                success: success
            });
        }
    };
    $(function () {
        var demo = document.getElementById('plain');
        input = demo.getElementsByTagName('input');
        var iNow = 0;
        type = !-[1, ] ? 'onpropertychange' : 'oninput',
                limit = 1; //满足自动切换焦点的字符数
        for (var i = 0; i < input.length - 1; i++) {
            input[i].index = i;
            input[i][type] = function () {
                iNow = this.index;
                var that = this;
                setTimeout(function () {
                    that.value.length > limit - 1 && input[iNow + 1].focus();
                }, 0)
                if (!IsUpper(that.value)) {
                    that.value = that.value.toUpperCase();
                }
            }
        }
        draw_point();
    });
    function draw_point() {
        var c = document.getElementById("canvas");
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#000000";
        cxt.beginPath();
        cxt.arc(10, 15, 5, 0, Math.PI * 2, true);
        cxt.closePath();
        cxt.fill();

        c = document.getElementById("mycanvas");
        cxt = c.getContext("2d");
        cxt.fillStyle = "#000000";
        cxt.beginPath();
        cxt.arc(10, 15, 5, 0, Math.PI * 2, true);
        cxt.closePath();
        cxt.fill();
    }
    function IsUpper(code) {
        return code === code.toUpperCase()
    }
</script>

